<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<link href="<%= request.getContextPath() %>/css/video.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%= request.getContextPath() %>/js/jcarousellite_1.0.1.js"></script> 
<script type="text/javascript">

$(document).ready(function() {
	$(".carousel").each(function() {
		$(this).jCarouselLite({
			btnPrev: $(".prev" + $(this).attr("id")),
			btnNext: $(".next" + $(this).attr("id")),
		    visible: 4
		});
	});
});
</script>
<div class="content left left-content">
<s:iterator value="videos" status="vidStatus">
	<div class="videoBlock">
	<h2><s:property value="key"/></h2>
	<div class="left">
		<s:if test="%{value.size() > 0}">
			<div class='prev prev<s:property value="#vidStatus.count"/>'><img src="<%= request.getContextPath() %>/images/carPrev-on.png" /></div>
			<div id='<s:property value="#vidStatus.count"/>' class="carousel">
			<ul>
				<s:iterator value="value">
					<li>
						<a href='/video/<s:property value="id"/>'><div class="vidImg"><img alt='<s:property value="name"/>' src='<s:property value="thumbnail"/>'></div>
						<div class="vidInfo"><s:property value="name"/> 
						<s:if test='length != null && length != ""'>
							(<s:property value="length"/>)
						</s:if>
						</div></a>
					</li>
				</s:iterator>
			</ul>		
			</div>
	 		<div class='next next<s:property value="#vidStatus.count"/>'><img src="<%= request.getContextPath() %>/images/carouNext-on.png" /></div>
		</s:if>
	</div>
	</div>
</s:iterator>

</div>
<jsp:include page="include/right-ads.jsp"></jsp:include>